<section id="content">
  <!-- Docs page layout -->
  
  <!-- Validation Maxlenght description-->
  <script language="javascript" type="text/javascript">

    $(document).ready( function () {
     

      maxLength = $("textarea#comment").attr("maxlength");
      $("textarea#comment").after("<div><span id='remainingLengthTempId' style='color: red;'>" 
        + maxLength + "</span> <span>ចំនូនអក្សរដែលនៅសល់ <span style='color:red'> <i class='glyphicon glyphicon-asterisk'></i>&nbsp; ប្រ​សិនជា​អ្នក​បញ្ចូល​ជា​ភា​សាខ្មែរ​សូម​ចុច​ដក​ឃ្លា(ចន្លោះមើលមិនឃើញ)​ នៅចន្លោះពាក្យនីមួយៗ។</span></span></div>");

      $("textarea#comment").bind("keyup change", function(){checkMaxLength(this.id,  maxLength); } )

      //////////// Validation for check max length for new Tag

      maxLengthTag = $("input#check_max_lg_new_tag").attr("maxlength");
      $("input#check_max_lg_new_tag").after("<div><span id='remainingLengthTempIdTag' style='color: red;'>" 
        + maxLengthTag + "</span> <span>ចំនូនអក្សរដែលនៅសល់</span>");
      
      $("input#check_max_lg_new_tag").bind("keyup change", function(){checkMaxLengthTag(this.id,  maxLengthTag); } )
      
      //////////////
    });

    function checkMaxLength(textareaID, maxLength){

      currentLengthInTextarea = $("#"+textareaID).val().length;
      $(remainingLengthTempId).text(parseInt(maxLength) - parseInt(currentLengthInTextarea));

      if (currentLengthInTextarea > (maxLength)) { 

      // Trim the field current length over the maxlength.
      $("textarea#comment").val($("textarea#comment").val().slice(0, maxLength));
      $(remainingLengthTempId).text(0);
    }
  }
    ///////////// validation for Check max length for new Tag
    function checkMaxLengthTag(textareaID, maxLength){

      currentLengthInTextarea = $("#"+textareaID).val().length;
      $(remainingLengthTempIdTag).text(parseInt(maxLength) - parseInt(currentLengthInTextarea));

      if (currentLengthInTextarea > (maxLength)) {
          // Trim the field current length over the maxlength.
          $("input#check_max_lg_new_tag").val($("input#check_max_lg_new_tag").val().slice(0, maxLength));
          $(remainingLengthTempIdTag).text(0);
        }
      }
    </script>

    <!-- MOdal New Tag -->
    <!-- Modal -->
    <div class="rows">
      <div class="col-xs-12 hold-div-col-new" style="padding: 0 !important">
        <div class="modal" id="newTag" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button"><img style="width:20px; height:20px; " src="<?php echo base_url().F_IMG; ?>closebtn.png" /></button>
                <h4 class="modal-title" id="myModalLabel">បញ្ចូលពាក្យគន្លឺះថ្មី</h4>
              </div>
              <form class="form-horizontal" action="<?php echo base_url();?>tags/new_tags" method="post" onsubmit="return validateForm()" name="enternewtag">
                <div class="modal-body">

                 <div class="form-group">
                  <div class="rows">
                    <div class="col-md-12">
                      <div class="col-lg-12">
                        <input class="form-control input-lg" onclick="validateInputNewTag()" maxlength="25" id="check_max_lg_new_tag" name="enter_new_tag" placeholder="បញ្ចូលនៅទីនេះ" type="text">
                      </div><br />
                    </div>
                  </div>
                </div>      
              </div>

              <div class="modal-footer">
                <h6 style="float: left; color: red;" id="error_msg"></h6>
                <button type="button" onclick="insertNewTag()" name="addnewtag" class="btn btn-custom-lighten-create btn_response enter_new_tag"><i class="glyphicon glyphicon-ok"></i> យល់ព្រម </button>
                <button class="btn btn-default btn_response btn-cancel" data-dismiss="modal" type="button"><i class="glyphicon glyphicon-remove"></i> បោះបង់​</button>
              </div>
            </form><!--  </form>-->
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

      <!-- Form new Post -->
      <!-- Script validate form is emtpy -->
      <script type="text/javascript">
        function validateInputNewTag(obj){
          document.getElementById('error_msg').innerHTML = "";
        }
        function validateForm() {
          var x = document.forms["enternewtag"]["enter_new_tag"].value;
          if (x == null || x == "") {
            document.getElementById("error_msg").innerHTML = "<i class='glyphicon glyphicon-warning-sign'></i>&nbsp;សូមបញ្ចូលពាក្យគន្លឺះថ្មីនៅមុនពេលចុចប៊ូតុងយល់ព្រម !";

            return false;
          }else{
         

          }
        }
        function insertNewTag(){

            var x = document.forms["enternewtag"]["enter_new_tag"].value;
          if (x == null || x == "") {
            document.getElementById("error_msg").innerHTML = "<i class='glyphicon glyphicon-warning-sign'></i>&nbsp;សូមបញ្ចូលពាក្យគន្លឺះថ្មីនៅមុនពេលចុចប៊ូតុងយល់ព្រម !";

            return false;
          }else{
             var newTagName = document.getElementById('check_max_lg_new_tag').value;
             $.post("<?php echo base_url();?>tags/new_tags",{new_name:newTagName},function(result){
             
                if(result=="exits"){
                   document.getElementById("error_msg").innerHTML = "<i class='glyphicon glyphicon-warning-sign'></i>&nbsp;ពាក្យគន្លឺះដែលលោកអ្នកបញ្ចូលមានរួចហើយ!";
                }else{
                    location.reload();
                }
              
            });
          }
        }

      </script>

    <!-- End of script validate form is empty -->
    <!-- End of Modal new Tag -->
    <!-- Form new Post -->
  <div class="col-md-9 new-post-col" style="margin-left: 17.50%; width: 65%">
    <form class="form-horizontal" action="<?php echo base_url();?>posts/create_post" onsubmit="return validateFormCreatePost()" method="post" enctype="multipart/form-data">
      <table class="table table-newpost">
        <tr>
          <td><h3>១​-ភ្ជាប់​ជា​មួយ</h3> 
          <label class="number_one"><input type="radio" name="upload" checked="true" value="checked_upload_image" >រូបភាព</label> 
          &nbsp;<label class="number_three"><input type="radio" name="upload" value="checked_embed_image">រូប​ភាព​តាម​ URL</label>
          &nbsp;<label class="number_two"><input type="radio" name="upload" value="checked_embed_video">វី​ដេ​អូរ​រឺ​អត្ថ​បទ​តាម​វេប​សាយ​</label>
          &nbsp;<label class="number_four"><input type="radio" name="upload" value="checked_embed_text">ពាក្យពេចន៍</label>
          <div class="contain_post">
            <input type="hidden" id="storeimgurl" name="img_url" value="<?php //echo $object_image_url; ?>" />
            <div class="contain_upload_image">
              <input type="file" onchange="file_selected = true;" data-buttonBefore="true" name="uploaded_files" id="fileselect" style="width: 65% !important; float: left;" class="btn btn-default input-xlarge filestyle" />
            </div>
            <div class="box-url contain_embed_video">
              <textarea name="embedUrl" maxlength="255" class="form-control" id="textarea_embed_video" style="width: 65%; height:40px;" rows="3"></textarea>
            </div>
            <div class="box-url contain_emebd_image">
              <textarea name="embedImg_url" maxlength="255" class="form-control url_image" id="textarea_embed_image" style="width: 65%; height:40px;" rows="3"></textarea>
            </div>
            <br />
            <div id="loading"></div>
            <div id="result_embed_video"></div>
            <div id="result_embed_image"></div>
        </div>
          </td>
        </tr>
        <tr>
          <td>
        </tr>
        <tr class="text_description" style="display:none">
          <td><label><h3>ពាក្យពេចន៍</h3>
            <textarea onclick="document.getElementById('error_desc').innerHTML= ''" name="newpost_description" id="comment" maxlength="250" class="form-control comment_post" style="width: 100%" rows="3"></textarea>
            </label>
          </td>
        </tr>
        <tr>
          <td><h3>២-ពាក្យគន្លឺះ</h3>
            <select data-placeholder="Please Select a Tag..." class="chosen-select input-xlarge form-control" tabindex="4" style="width: 400px; height:156px !important" id="select_plugin" name="select_tag[]" multiple>
             
              <?php 
              foreach($tags as $row){
                $tagname= $row->tag_name;
                $tag_id = $row->tag_id;
                ?>
                <option id-tag="<?php echo $tag_id; ?>" value="<?php echo $tag_id; ?>"><?php echo $tagname; ?></option>

                <?php
              }
              ?> 
            </select>
            <script type="text/javascript">
                document.getElementById("storeidtag").value = document.getElementById('select_plugin').value;
                function getValueFromSelectPlugin(obj){
                    var getid = obj.options[obj.selectedIndex].getAttribute('id-tag');
                    document.getElementById("storeidtag").value = getid;
                }
            </script>
            
            
            <a href="#" onclick="clearTextValue()" data-toggle="modal" data-target="#newTag" class="btn btn-default btn_response​ btn-create" style="text-align: left; margin-left: 0px;"><i class="glyphicon glyphicon-plus"></i> បង្កើតពាក្យគន្លឺះថ្មី </a>

          </td>
        </tr>
        <tr>
          <td>
              <?php echo $image; ?>
              <br /><br />
              <input style="width:28%" type="text" name="captcha" class="form-control">
              <?php echo form_error('captcha'); ?>
          </td>
        <tr>
          <td>
            <input type="hidden" name="btn_check_submit" value="1">
            <button type="submit" class="btn btn-custom-lighten-create btn_response btn-create" name="btn_new_post"><i class="glyphicon glyphicon-ok"></i> ប្រកាស</button>&nbsp;&nbsp;
            <button type="button" onclick="window.history.back()"class="btn btn-default btn-create"><i class="glyphicon glyphicon-remove"></i> បោះបង់​</button>

          </td>
        </tr>
      </table>
      <h5 style="color: red;" id="error_desc"></h5>

    </form>
    <br /><br /><br /><br /><br />
    
    <script type="text/javascript">
      function validateFormCreatePost() {
        var file_selected = false;
        var desc = document.getElementById("comment").value;
        var file = document.getElementById("fileselect").value;
        if (desc == "" && !file_selected) {
          document.getElementById("error_desc").innerHTML = "&nbsp;&nbsp;&nbsp;<i class='glyphicon glyphicon-warning-sign'></i>&nbsp;សូមបញ្ចូលពាក្យខ្លះនៅក្នុងប្រអប់ពាក្យពេចន៍របស់អ្នកមុនពេលចុចប៊ូតុងប្រកាស !";
          return false;
        }
      }
      function clearTextValue(){
          document.getElementById("error_msg").innerHTML = "";
          document.getElementById("check_max_lg_new_tag").value = "";
          document.getElementById("remainingLengthTempIdTag").innerHTML = "25";
        }

    </script>

  </section>
</div>
<script src="<?php echo base_url() . F_JS; ?>create_post.js" type="text/javascript" charset="utf-8"></script>
